<template>
  <div class="tiktok-error" :class="{ 'fullscreen': fullscreen }">
    <div class="error-content">
      <!-- 错误图标动画 -->
      <div class="error-icon">
        <div class="broken-heart">
          <div class="heart-piece left"></div>
          <div class="heart-piece right"></div>
        </div>
        <div class="wifi-icon">
          <div class="wifi-line line1"></div>
          <div class="wifi-line line2"></div>
          <div class="wifi-line line3"></div>
          <div class="wifi-dot"></div>
        </div>
      </div>
      
      <!-- 错误信息 -->
      <div class="error-text">
        <h3 class="error-title">{{ title }}</h3>
        <p class="error-desc">{{ description }}</p>
      </div>
      
      <!-- 操作按钮 -->
      <div class="error-actions">
        <button class="retry-btn" @click="handleRetry" :disabled="retrying">
          <span class="btn-text">{{ retrying ? '重试中...' : '重新加载' }}</span>
          <div class="btn-shine"></div>
        </button>
        <button class="back-btn" @click="handleBack" v-if="showBack">
          返回首页
        </button>
      </div>
      
      <!-- 错误代码（可选） -->
      <div class="error-code" v-if="errorCode">
        错误代码: {{ errorCode }}
      </div>
    </div>
    
    <!-- 背景粒子效果 -->
    <div class="error-particles">
      <div class="particle" v-for="particle in particles" :key="particle.id" 
           :style="particle.style"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'

// 定义组件属性
const props = defineProps({
  // 是否全屏显示
  fullscreen: {
    type: Boolean,
    default: true
  },
  // 错误标题
  title: {
    type: String,
    default: '网络连接失败'
  },
  // 错误描述
  description: {
    type: String,
    default: '请检查网络连接后重试'
  },
  // 错误代码
  errorCode: {
    type: String,
    default: ''
  },
  // 是否显示返回首页按钮
  showBack: {
    type: Boolean,
    default: true
  }
})

// 定义事件
const emit = defineEmits(['retry', 'back'])

// 响应式数据
const retrying = ref(false)
const particles = reactive([])

// 生成随机粒子
const generateParticles = () => {
  particles.length = 0
  const count = 15
  
  for (let i = 0; i < count; i++) {
    particles.push({
      id: i,
      style: {
        left: `${Math.random() * 100}%`,
        top: `${Math.random() * 100}%`,
        width: `${Math.random() * 6 + 2}px`,
        height: `${Math.random() * 6 + 2}px`,
        animationDelay: `${Math.random() * 3}s`,
        opacity: Math.random() * 0.5 + 0.1
      }
    })
  }
}

// 处理重试
const handleRetry = async () => {
  if (retrying.value) return
  
  retrying.value = true
  try {
    await emit('retry')
  } finally {
    setTimeout(() => {
      retrying.value = false
    }, 2000)
  }
}

// 处理返回
const handleBack = () => {
  emit('back')
}

// 组件挂载时生成粒子
onMounted(() => {
  generateParticles()
})

// 组件卸载时清理
onUnmounted(() => {
  particles.length = 0
})
</script>

<style scoped lang="scss">
.tiktok-error {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  
  &.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
  
  .error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 40px;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  
  .error-icon {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
  }
  
  .broken-heart {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    .heart-piece {
      position: absolute;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #ff0050, #ff2d70);
      border-radius: 50%;
      
      &.left {
        top: 0;
        left: 0;
        transform: rotate(45deg);
        animation: breakLeft 2s ease-in-out infinite;
      }
      
      &.right {
        bottom: 0;
        right: 0;
        transform: rotate(45deg);
        animation: breakRight 2s ease-in-out infinite;
      }
      
      &::before, &::after {
        content: '';
        position: absolute;
        width: 40px;
        height: 40px;
        background: inherit;
        border-radius: 50%;
      }
      
      &::before {
        top: -20px;
        left: 0;
      }
      
      &::after {
        top: 0;
        left: -20px;
      }
    }
  }
  
  .wifi-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    .wifi-line {
      position: absolute;
      border: 2px solid #ff0050;
      border-top: none;
      border-radius: 0 0 50% 50%;
      
      &.line1 {
        width: 60px;
        height: 30px;
        bottom: 0;
        left: 0;
        opacity: 0.3;
      }
      
      &.line2 {
        width: 40px;
        height: 20px;
        bottom: 10px;
        left: 10px;
        opacity: 0.5;
      }
      
      &.line3 {
        width: 20px;
        height: 10px;
        bottom: 20px;
        left: 20px;
        opacity: 0.8;
        animation: wifiPulse 2s infinite;
      }
    }
    
    .wifi-dot {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #ff0050;
      border-radius: 50%;
      bottom: 25px;
      left: 27px;
      animation: dotPulse 1.5s infinite;
    }
  }
  
  .error-text {
    .error-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #ff0050, #ff2d70);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .error-desc {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.5;
      max-width: 300px;
    }
  }
  
  .error-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    
    .retry-btn {
      position: relative;
      padding: 12px 30px;
      background: linear-gradient(135deg, #ff0050, #ff2d70);
      border: none;
      border-radius: 25px;
      color: white;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s ease;
      
      &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 0, 80, 0.4);
      }
      
      &:active:not(:disabled) {
        transform: translateY(0);
      }
      
      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
      
      .btn-shine {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent
        );
        transition: left 0.5s;
      }
      
      &:hover:not(:disabled) .btn-shine {
        left: 100%;
      }
    }
    
    .back-btn {
      padding: 12px 25px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 25px;
      color: white;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
      }
    }
  }
  
  .error-code {
    margin-top: 15px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
  }
  
  .error-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    
    .particle {
      position: absolute;
      background: linear-gradient(135deg, #ff0050, #ff2d70);
      border-radius: 50%;
      animation: float 6s infinite linear;
    }
  }
  
  @keyframes breakLeft {
    0%, 100% {
      transform: rotate(45deg) translate(0, 0);
    }
    50% {
      transform: rotate(45deg) translate(-5px, -5px);
    }
  }
  
  @keyframes breakRight {
    0%, 100% {
      transform: rotate(45deg) translate(0, 0);
    }
    50% {
      transform: rotate(45deg) translate(5px, 5px);
    }
  }
  
  @keyframes wifiPulse {
    0%, 100% {
      opacity: 0.8;
    }
    50% {
      opacity: 0.2;
    }
  }
  
  @keyframes dotPulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.7;
    }
  }
  
  @keyframes float {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: v-bind('particle.opacity || 0.3');
    }
    100% {
      transform: translateY(-100px) rotate(360deg);
      opacity: 0;
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .tiktok-error .error-content {
    padding: 20px;
    gap: 20px;
    
    .error-icon {
      width: 100px;
      height: 100px;
    }
    
    .error-text .error-title {
      font-size: 20px;
    }
    
    .error-actions {
      flex-direction: column;
      align-items: center;
      
      .retry-btn, .back-btn {
        width: 200px;
      }
    }
  }
}
</style>